<script setup lang="ts">
interface Props {
   goodId?:string
}

defineProps<Props>()
</script>

<template>
   <div class="header">
      <i class="icon"></i>
      <span class="title">{{ goodId ? "商品推荐" : "猜你喜欢"}}</span>
   </div>
</template>

<style scoped lang="less">
.header {
   height: 80px;
   line-height: 80px;
   padding: 0 20px;

   .title {
      font-size: 20px;
      padding-left: 10px;
   }

   .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      border-top: 4px solid @xtxColor;
      border-right: 4px solid @xtxColor;
      box-sizing: border-box;
      position: relative;
      transform: rotate(45deg);

      &::before {
         content: "";
         width: 10px;
         height: 10px;
         position: absolute;
         left: 0;
         top: 2px;
         background: lighten(@xtxColor, 40%);
      }
   }
}
</style>
